import { useRequest, useRafInterval } from 'ahooks';
import { Upload as AntUpload, App, Modal, Button, Input, Switch } from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useContextSelector } from 'use-context-selector';

import datasetService from '@/api/services/datasetService';
import { Collection, PromptAgentQA, QA, UploadFileCollection } from '@/common';
import { Upload } from '@/components/upload';
import { useDatasetStore } from '@/store/datasetStore';

import Back from '../datasets/components/Back';
import DatasetsContextProvider, { DatasetsContext } from '../datasets/context';


import FileListTable from '../datasets/components/FileListTable';
import UrlFileListTable from '../datasets/components/UrlFileListTable';

import CommonModal from '@/pages/components/modal/CommonModal';
import DeleteConfirmModal from '@/pages/datasets/components/DeleteConfirmModal';
import EmptyPage from '@/components/empty/EmptyPage';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useParams } from '@/router/hooks';

import EditorPage from './components/qa-editor/QAEditor';

import { SvgIcon } from '@/components/icon';

import './styles/datasetdetail.scss';
import QAList from './components/qa-editor/QAList';

import { useInitializeData } from '@/store/configStore';

import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist';

import { ResultEnum } from '@/types/enum';

import { debounce, isArray } from 'lodash';

import { generateUUID } from '@/utils/common';
import NotData from '@/components/NotData';
// 设置 Web Worker 的路径
GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';

interface Props {
  id: string;
  name: string;
  parentId?: string;
  onBack?: () => void;
}

const Datasets = ({ id: propId, name: propName, parentId: propParentId, onBack }: Props) => {
  const initializeData = useInitializeData();
  const [searchParams] = useSearchParams();
  const { message } = App.useApp();
  const id = propId || searchParams.get('id');
  const parentId = propParentId || searchParams.get('parentId');
  const datasetName = propName || searchParams.get('name');
  // const [collections, setCollections] = useState<Collection[]>([]);
  const [activeKey, setActiveKey] = useState('2');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const datasetStore = useDatasetStore();
  const [isUploading, setIsUploading] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
  const [showUpdateModal, setShowUpdateModal] = useState(false);
  const [selectedCollection, setSelectedCollection] = useState<Collection | null>(null);
  const [selectedAddFile, setSelectedAddFile] = useState<UploadFileCollection | null>(null);
  const [renameName, setRenameName] = useState('');
  const acceptFileTypes = ['txt', 'docx', 'doc', 'csv', 'pdf', 'md', 'html', 'pptx', 'ppt', 'xlsx'];
  const acceptImgFileTypes = ['png', 'jpg', , 'jpeg', 'mp4'];
  const qaAcceptFileTypes = ['csv', 'xlsx'];
  const { isPc } = useWindowWidth();
  const [qa, setQA] = useState<QA>({ q: '', a: '<p><br></p>' });
  const [qas, setQAs] = useState<QA[]>([]);
  const [inputValue, setInputValue] = useState<string>('');
  const [isDepthOpen, setIsDepthOpen] = useState<boolean>(false);
  const [isdeleArr, setIsdeleArr] = useState<boolean>(false);
  const { appId = '' } = useParams() as { appId: string };
  const shortPolling = 5000;
  const longPolling = 30000;
  const [interval, setInterval] = useState<number>(shortPolling);
  const [dataset_id, setDataset_id] = useState(id);
  const [parent_id, setParent_Id] = useState(id);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const disclaimerContent = `
      重要提示：在使用本功能前，请务必仔细阅读并理解以下风险声明：

      法律合规性风险：
      • 部分网站/数据受法律法规保护（如《个人信息保护法》《著作权法》《反不正当竞争法》等），未经授权爬取可能构成侵权或违法行为
      • 若目标网站明确禁止爬虫（如通过robots.txt协议、用户协议等），强行抓取可能违反《计算机信息系统安全保护条例》等相关法规，导致法律追责

      隐私与伦理风险：
      • 爬取用户隐私信息（如手机号、身份证等）或未公开数据，可能触犯隐私保护条款，面临民事或刑事风险
      • 请避免对目标网站造成超负荷访问（如高频请求），否则可能被认定为网络攻击（DDoS），引发技术反制及法律后果

      第三方追责风险：
      • 若因不当使用本工具导致被爬方（网站/平台）或第三方主张索赔、封禁IP、终止服务等，相关责任需由使用者自行承担

      我们强烈建议您：
      ✅ 使用前充分审查目标网站的合规要求（如robots.txt、服务条款）
      ✅ 避免爬取敏感数据或设置侵略性抓取频率
      ✅ 必要时咨询法律专业人士，确保行为合法
      `;

  const [taskErrorList, setTaskErrorList] = useState<string[]>([]);

  const [uploadControllers, setUploadControllers] = useState<Map<string, AbortController>>(
    new Map(),
  );

  const file_size = useMemo(() => {
    return initializeData.max_supported_single_file_size ?? 500;
  }, [initializeData]);

  const file_count = useMemo(() => {
    return initializeData.max_supported_file_count ?? 0;
  }, [initializeData]);

  const { dataset } = useContextSelector(DatasetsContext, (v) => v);
  const {
    updateAddedDatasetFile,
    removeAddedDatasetFile,
    addAddedDatasetFiles,
    getAddedDatasetFiles,
  } = datasetStore;
  const handlePageChange = (page: number) => {
    setPage(page);
    console.log('page: ', page);
  };

  const paginationConfig = {
    current: page,
    pageSize,
    pageSizeOptions: undefined,
    total,
    onChange: handlePageChange,
  };

  /**
   * 初始化fcs文件处理任务列表
   * @returns
   */
  const updateFcsTasks = async () => {
    try {
      if (id) {
        const tasks = await datasetService.getFcsTaskDataset(id);
        let taskResult: string[] = [];
        tasks.map((item) => {
          if (item.status === 'error') {
            const exists = taskErrorList.find((v) => v === item.file_id);
            if (!exists) {
              taskResult = [...taskResult, item.file_id];
            }
          }
        });

        setTaskErrorList(taskResult);

        if (!Array.isArray(tasks)) {
          return;
        }
        const addedDatas = getAddedDatasetFiles(id);
        tasks.forEach((task) => {
          // 列表里面没有就添加进去
          const taskData = addedDatas.find((data) => task.file_id === data.fileId);
          let percent = 0;
          switch (task.status) {
            case 'running':
              percent = 95;
              break;
            case 'pending':
              percent = 90;
              break;
            default:
              percent = 100;
              break;
          }
          if (!taskData) {
            const addedFile = {
              datasetId: id,
              uid: task.file_id,
              fileId: task.file_id,
              name: task.file_name,
              size: task.length ?? 0,
              type: 'file',
              percent,
              status: task.status,
              statusCn:
                typeof task?.message === 'string' && task.message.trim() ? task.message : '',
            };
            addAddedDatasetFiles(id, addedFile);
          }
        });
      }
    } catch (error) {
      console.error(error);
    }
  };

  const fcsTaskRefresh = async (uid: string) => {
    setInterval(shortPolling);
    updateAddedDatasetFile(id, {
      uid,
      percent: 75,
      status: 'running',
    });
  };

  /** *
   * 更新fcs文件处理进度
   */
  const updateFcsTaskStatus = async () => {
    if (id) {
      try {
        const addedDatas = getAddedDatasetFiles(id);
        const fileDatas = addedDatas.filter(
          (data) => data.type !== 'url' && data.status !== 'error',
        );
        // if (fileDatas.length === 0) {
        //   return;
        // }
        if (fileDatas.length === 0) {
          if (interval == shortPolling) {
            setInterval(longPolling);
          }
        } else if (interval == longPolling) {
          setInterval(shortPolling);
        }
        const tasks = await datasetService.getFcsTaskDataset(id);

        if (!Array.isArray(tasks)) {
          return;
        }

        tasks.map((item) => {
          if (item.status === 'error') {
            const exists = taskErrorList.find((v) => v === item.file_id);
            if (!exists) {
              setTaskErrorList((v) => [...v, item.file_id]);
              message.open({
                type: 'error',
                content: item.message,
              });
            }
          }
        });

        fileDatas.forEach((data) => {
          const taskData = tasks.find((task) => task.file_id === data.fileId);

          if (taskData) {
            let { percent } = data;
            switch (taskData.status) {
              case 'running':
                percent = 95;
                break;
              case 'pending':
                percent = 90;
                break;
              case 'failed':
                taskData.status = 'error';
                break;
              default:
                percent = 100;
                break;
            }
            updateAddedDatasetFile(id, {
              uid: data.uid,
              status: taskData.status,
              statusCn:
                typeof taskData?.message === 'string' && taskData.message.trim()
                  ? taskData.message
                  : '',
              percent,
            });
          } else if (data.percent >= 75) {
            removeAddedDatasetFile(id, {
              uid: data.uid,
            });
          }
        });
      } catch (error) {
        console.error(error);
      }
    }
  };

  const updateWebLinkTaskStatus = async () => {
    if (id) {
      const addedDatas = getAddedDatasetFiles(id);
      const fileDatas = addedDatas.filter(
        (data) => data.type === 'url' && data.status !== 'error' && data?.status !== 'revoked',
      );
      // if (fileDatas.length === 0) {
      //   return;
      // }
      if (fileDatas.length === 0) {
        if (interval == shortPolling) {
          setInterval(longPolling);
        }
      } else if (interval == longPolling) {
        setInterval(shortPolling);
      }
      updateWebLinktTask();
    }
  };

  const refrshTask = (uid: string, isResume: boolean) => {
    setInterval(shortPolling);
    id &&
      isResume &&
      updateAddedDatasetFile(id, {
        uid,
        status: 'uploading',
      });
    updateWebLinktTask();
  };

  const updateWebLinktTask = async () => {
    try {
      if (id) {
        const addedDatas = getAddedDatasetFiles(id);
        console.log('getAddedDatasetFiles(id)==============', addedDatas);

        const data = await datasetService.getAllWebLink(id, 1, 100);
        if (data && !Array.isArray(data.page_data)) {
          return;
        }

        const fileDatas = addedDatas.filter(
          (data) => data.type === 'url' && data.status !== 'error',
        );
        const fileDataIds = fileDatas.map((fileData) => fileData.uid);
        const dataIds = data.page_data.map((item) => item.crawl_records_id);
        const missingIds = fileDataIds.filter((uid) => uid && !dataIds.includes(uid));
        missingIds.forEach((uid) => {
          // message.success('导入成功');
          uid &&
            removeAddedDatasetFile(id, {
              uid,
            });
        });

        if (fileDataIds?.length > 0 && missingIds?.length == fileDataIds?.length) {
          message.success('链接导入成功');
        }

        console.log(data.page_data, addedDatas);
        data.page_data.forEach((task) => {
          const taskData = addedDatas.find((data) => task.crawl_records_id === data.fileId);
          if (!taskData) {
            const addedFile = {
              datasetId: id,
              uid: task.crawl_records_id,
              fileId: task.crawl_records_id,
              name: task.link,
              size: 0,
              type: 'url',
              percent: task?.progress,
              status:
                task.status == 'FAILURE'
                  ? 'error'
                  : task.status == 'REVOKED'
                    ? 'revoked'
                    : 'uploading',
              statusCn: task?.status_cn,
              totalCount: task?.total_count || 0,
              successCount: task?.status_counter?.SUCCESS || 0,
              task_src: task?.task_src,
            };
            addAddedDatasetFiles(id, addedFile);
            return;
          }
          const percent = task?.progress;
          console.log(taskData);

          const addedFile = {
            datasetId: id,
            uid: task.crawl_records_id,
            fileId: task.crawl_records_id,
            name: task.link,
            size: 0,
            type: 'url',
            percent,
            status:
              task.status == 'FAILURE'
                ? 'error'
                : task.status == 'REVOKED'
                  ? 'revoked'
                  : 'uploading',
            statusCn: task?.status_cn,
            totalCount: task?.total_count || 0,
            successCount: task?.status_counter?.SUCCESS || 0,
          };
          if (percent == 100) {
            removeAddedDatasetFile(id, {
              uid: task.crawl_records_id,
            });
          }
          if (!taskData) {
            addAddedDatasetFiles(id, addedFile);
          } else {
            // if (task.status == 'FAILURE' && taskData?.status != 'error') {
            //   message.error(task?.traceback);
            // }
            updateAddedDatasetFile(id, {
              uid: task.crawl_records_id,
              percent,
              statusCn: task?.status_cn,
              totalCount: task?.total_count || 0,
              successCount: task?.status_counter?.SUCCESS || 0,
              status:
                task.status == 'FAILURE'
                  ? 'error'
                  : task.status == 'REVOKED'
                    ? 'revoked'
                    : 'uploading',
            });
          }
        });
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    // 初始化fcs文件处理任务列表
    updateFcsTasks();
    updateWebLinktTask();
  }, []);

  useRafInterval(() => {
    if (selectedKey == '2') {
      updateWebLinkTaskStatus();
    } else {
      updateFcsTaskStatus();
    }
  }, interval);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const insertQA = async () => {
    try {
      const res = await datasetService.insertFaq({
        dataset_id: id ?? '',
        collection_id: '',
        datas: qas,
        app_id: appId,
      });
      const { fail_list, msg } = res;
      if (fail_list && fail_list.length > 0) {
        const fail_ids = fail_list.map((item) => item.id);
        setQAs((prev) =>
          prev
            .filter((item) => fail_ids.includes(item.id!))
            .map((item) => ({ ...item, status: 2 })),
        );
        message.warning(msg ?? '导入成功');
      } else {
        setQAs([]);
        message.success(msg ?? '导入成功');
      }
    } catch (error) {
      console.error(error);
    }
  };

  const confirmImport = async () => {
    try {
      setIsUploading(true);
      if (selectedKey == '2') {
        if (!inputValue) {
          message.info('请在输入框中输入网址，支持批量输入（每行一个）');
          return;
        }
        const urlsArray = inputValue
          .trim()
          .split('\n')
          .filter((url) => url.trim() !== '');
        const uniqueUrls = [...new Set(urlsArray)];

        message?.success('链接开始导入');
        const promises = uniqueUrls.map((url) => urlSubmit(url));
        await Promise.all(promises);

        setInterval(shortPolling);
      } else if (selectedKey == '4') {
        await insertQA();
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsUploading(false);
    }
  };

  const urlSubmit = async (name: string) => {
    if (!id) {
      return;
    }

    const body = {
      datasetId: id,
      cookie: id,
      name,
      chunkSize: 1500,
      // chunkSize: 512,
      restart_by_recovery: true,
      depth: isDepthOpen ? 1 : 0,
      chunkSplitter: '',
      fileSource: 'link',
      link: name,
      qaPrompt: PromptAgentQA.description,
      trainingType: 'chunk',
      metadata: { webPageSelector: '' },
      app_id: appId,
    };
    if (parentId) {
      body.parentId = parentId;
    }
    fetch('/api/webcrawl/openapi/v1/submit_task', {
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json',
        'X-Dataset-Id': id,
      },
      method: 'POST',
    }).then(async (res) => {
      console.log(res);
      const responseData = await res.json();
      console.log(responseData);
      if (responseData?.code != 200) {
        debounceTipShow(responseData?.message);
        return;
      }

      if (responseData?.data?.success?.length > 0) {
        const crawl_records_id = responseData?.data?.success?.[0]?.crawl_records_id;

        const addedDatas = getAddedDatasetFiles(id);
        const urlDatas = addedDatas.filter(
          (data) => data.type === 'url' && data.status !== 'error',
        );
        if (!crawl_records_id) {
          return;
        }
        const taskData = urlDatas.find((data) => crawl_records_id === data.fileId);
        const addedFile = {
          datasetId: id,
          uid: crawl_records_id,
          fileId: crawl_records_id,
          name,
          size: 0,
          type: 'url',
          percent: 0,
          status: 'ready',
        };
        if (!taskData) {
          addAddedDatasetFiles(id, addedFile);
        } else {
          updateAddedDatasetFile(id, addedFile);
        }
      }

      setInterval(shortPolling);
      // const taskData = getAddedDatasetFiles(id).find(
      //   (data) => responseData?.data?._id === data.fileId,
      // );
      // if (!responseData?.data?._id) {
      //   return;
      // }
      // let addedFile = {
      //   datasetId: id,
      //   uid: responseData?.data?._id,
      //   fileId: responseData?.data?._id,
      //   name: name,
      //   size: 0,
      //   type: 'url',
      //   percent: 1,
      //   status: 'ready',
      // };
      // if (!taskData) {
      //   addAddedDatasetFiles(id, addedFile);
      // } else {
      //   updateAddedDatasetFile(id, addedFile);
      // }
    });
    setInputValue('');
  };

  const fetchCollections = useCallback(async () => {
    const data = await datasetStore.loadCollections({
      datasetId: id || '',
      pageNum: page,
      pageSize,
    });
    setTotal(data.total);
    return data;
  }, [page, pageSize, id]);

  const {
    data,
    run: fetchCollectionsAsync,
    loading,
  } = useRequest(fetchCollections, {
    cacheKey: id ?? 'cache-collections',
    refreshDeps: [id, page, pageSize],
  });

  // 读取 PDF 文件的页数
  const readPdfPageCount = async (file: File): Promise<number> => {
    if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
      console.error('文件不是有效的 PDF 文件');
      return 0;
    }
    try {
      const arrayBuffer = await file.arrayBuffer();
      const pdf = await getDocument({ data: arrayBuffer }).promise;
      return pdf.numPages;
    } catch (error) {
      console.error('Failed to read PDF file:', error);
      // message.error('无法读取PDF文件的页数');
      return 0;
    }
  };

  const upLoadFileToDb = async (
    metadata: Record<string, any>,
    bucketName: string,
    file: File,
    onError: () => void,
    onUploadProgress: (percent: number, isDelete: boolean | undefined) => void,
    pageCount = 0,
  ) => {
    console.log('PDF 文件的页数:', pageCount);

    const formData = new FormData();
    formData.append('metadata', JSON.stringify(metadata));
    formData.append('bucketName', bucketName);
    formData.append('file', file, encodeURIComponent(file.name));
    formData.append('parent_id', parent_id);
    formData.append('dataset_id', dataset_id);
    formData.append('app_id', appId);
    formData.append('entrance', selectedKey === '3' ? 'QA' : '');
    let addedFile = {
      datasetId: id,
      uid: file.uid,
      fileId: '',
      name: file.name,
      size: file.size,
      type: file.type,
      percent: 1,
      status: 'ready',
      pageCount,
    };
    addAddedDatasetFiles(id, addedFile);
    while (getAddedDatasetFiles(id).filter((item) => item.status === 'uploading').length > 2) {
      await new Promise((resolve) => setTimeout(resolve, 100));
    }

    if (getAddedDatasetFiles(id).filter((item) => item.uid === addedFile.uid).length == 0) {
      return;
    }

    addedFile = {
      ...addedFile,
      status: 'uploading',
    };
    updateAddedDatasetFile(id, addedFile);

    setActiveKey('2');

    const abortController = new AbortController();

    if (file?.uid) {
      setUploadControllers((prev) => new Map([...prev, [file?.uid, abortController]]));
    }
    await datasetService
      .uploadFile(
        formData,
        (e) => {
          if (!e.total) return;
          const percent = Math.round((e.loaded / e.total) * 100);
          const limit = (e.total * 0.1) / 1024 / 1024 > 5 ? 5 : (e.total * 0.1) / 1024 / 1024;
          const isDelete = e.total - e.loaded <= limit;
          onUploadProgress && onUploadProgress(percent, isDelete);
        },
        abortController.signal,
      )
      .then(async (res) => {
        // while (getAddedDatasetFiles(id).filter(item => item.status === "uploaded").length > 0) {
        //   await new Promise(resolve => setTimeout(resolve, 100))
        // }
        addedFile = {
          ...addedFile,
          fileId: res,
          percent: 75,
          status: 'uploaded',
        };

        // throw new Error('err');
        // if (addedFile) {
        //   await uploadFiles(addedFile);
        // }
        updateAddedDatasetFile(id, addedFile);
        setInterval(shortPolling);
      })
      .catch((err) => {
        setUploadControllers((prev) => {
          const newMap = new Map(prev);
          newMap.delete(file.uid);
          return newMap;
        });
        addedFile = {
          ...addedFile,
          status: 'error',
        };
        // message.error(`上传失败, ${err.message}`)
        onError();
        updateAddedDatasetFile(id, addedFile);
      });
  };

  const customRequest = async (option: any) => {
    const { onProgress, onError, onSuccess, file, action } = option;

    const addedDatas = getAddedDatasetFiles(id).filter((item) => item.type != 'url');
    if (file_count > 0 && addedDatas.length + 1 > file_count) {
      debounceTipShow(`最多能同时上传${file_count}个文件！`);
      return false;
    }

    let pageCount = 0;
    if (file.type == 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
      pageCount = await readPdfPageCount(file);
      if (pageCount && pageCount > 300) {
        debounceTipShow(`PDF文件最大支持300页！`);
        return false;
      }
    }
    await upLoadFileToDb(
      {},
      'dataset',
      file,
      onError,
      (percent, isDelete) => {
        onProgress({ percent });
        if (percent === 100) {
          onSuccess('upload success');
        }
        updateAddedDatasetFile(id, {
          uid: file.uid,
          percent: (percent * 0.6).toFixed(1),
          isDelete,
        });
      },
      pageCount,
    );
  };

  const beforeUpload = (file: File, files: File[]) => {
    const addedDatas = getAddedDatasetFiles(id).filter((item) => item.type != 'url');
    console.log('addedDatas: ', addedDatas.length);

    const arr = file.name.split('.');
    if (arr.length < 2) {
      debounceTipShow('不支持该文件类型');
      return false;
    }
    if (selectedKey == '1') {
      if (!acceptFileTypes.includes(arr[arr.length - 1])) {
        debounceTipShow('不支持该文件类型');
        return false;
      }
    } else if (selectedKey == '5') {
      if (!acceptImgFileTypes.includes(arr[arr.length - 1])) {
        debounceTipShow('不支持该文件类型');
        return false;
      }
    } else if (!qaAcceptFileTypes.includes(arr[arr.length - 1])) {
      debounceTipShow('不支持该文件类型');
      return false;
    }

    if (file.type == 'video/mp4') {
      if (file.size > file_size * 1024 * 1024) {
        debounceTipShow(`视频文件大小超出 ${file_size}MB，不允许上传`);
        return false;
      }
    } else if (file.size > file_size * 1024 * 1024) {
      debounceTipShow(`文件大小超出 ${file_size}MB，不允许上传`);
      return false;
    }

    const filesLength = addedDatas.length;

    if (file_count > 0 && files.length > file_count - filesLength) {
      if (files.indexOf(file) === 0) {
        debounceTipShow(`最多能同时上传${file_count}个文件！`);
      }
      return AntUpload.LIST_IGNORE;
    }
    return true;
  };

  const uploadFiles = async (file: UploadFileCollection) => {
    updateAddedDatasetFile(id, {
      ...file,
      percent: 75,
    });

    if (selectedKey == '3') {
      const data = {
        datasetId: id,
        fileId: file.fileId?.fileId,
        // fileId: file.fileId!,
        name: file.name!,
        chunkSize: 512,
        chunkSplitter: '',
        qaPrompt: PromptAgentQA.description,
        trainingType: 'chunk',
      };

      if (parentId) {
        data.parentId = parentId;
      }

      const res = await datasetService.createCsvCollection(data).then(async () => {
        updateAddedDatasetFile(id, {
          uid: file.uid,
          percent: 100,
        });
        // await fetchCollectionsAsync()
      });

      removeAddedDatasetFile(id, {
        uid: file.uid,
      });
      message.success('导入成功');
      return res;
    }

    const data = {
      datasetId: id,
      fileId: file.fileId?.fileId,
      // fileId: file.fileId!,
      name: file.name!,
      chunkSize: 1500,
      chunkSplitter: '',
      qaPrompt: PromptAgentQA.description,
      trainingType: 'chunk',
      preservePdfImages: 'link',
      // preservePdfImages: 'ocr'
    };

    if (parentId) {
      data.parentId = parentId;
    }

    // const res = await datasetService.createDatasetCollection(data).then(async () => {
    //   setInterval(shortPolling);
    //   updateAddedDatasetFile(id, {
    //     uid: file.uid,
    //     percent: 81,
    //   });
    //   // await fetchCollectionsAsync()
    // });
    if (selectedKey != '1') {
      removeAddedDatasetFile(id, {
        uid: file.uid,
      });
      message.success('导入成功');
    }

    // return res;
  };

  const onConfirmUpload = async () => {
    if (!id) {
      return;
    }
    setIsUploading(true);
    try {
      const uploadFiles = getAddedDatasetFiles(id);
      const files = uploadFiles.filter((f) => f.percent! >= 75 && f.percent! < 80);
      await Promise.all(
        files.map(async (file) => {
          return uploadFiles(file);
        }),
      ).then(async () => {
        message.success('上传成功');
        // resetAddedDatasetFiles(id)
        // await fetchCollectionsAsync()
        setActiveKey('1');
      });
    } catch (error) {
    } finally {
      setIsUploading(false);
    }
  };

  const onUploadFileDelete = (file: UploadFileCollection, isArr?: boolean) => {
    // if (file.status != 'error' && file.status != 'ready' && file.percent! < 75 && file.type != 'url') {
    //   return message.error('请等待文件上传完成');
    // }

    console.log('file==============', file, isArr);

    if (file?.status == 'error') {
      id && removeAddedDatasetFile(id, file);
      if (file?.fileId) {
        if (file?.type == 'url') {
          datasetService.deleteUrlTaskDelete(file.fileId);
        } else {
          file?.percent! >= 75 && datasetService.deleteFcsTaskDelete(file.fileId);
        }
      }
      message.success('删除成功');
      return;
    }

    if (file?.type != 'url' && file?.status == 'ready') {
      id && removeAddedDatasetFile(id, file);
      message.success('删除成功');
      return;
    }

    if (file?.type != 'url' && file?.percent! < 75) {
      const controller = uploadControllers.get(file?.uid);
      if (controller) {
        controller.abort();
        setUploadControllers((prev) => {
          const newMap = new Map(prev);
          newMap.delete(file?.uid);
          return newMap;
        });
      }
      id && removeAddedDatasetFile(id, file);
      message.success('删除成功');
      return;
    }

    isArr && setIsdeleArr(isArr);

    setSelectedAddFile(file);
    setShowConfirmDelete(true);
  };

  const onCollectionDelete = (collection: Collection) => {
    setShowConfirmDelete(true);
    setSelectedCollection(collection);
  };

  const onConfirmDelete = async () => {
    setIsDeleting(true);
    console.log(1, selectedCollection);
    try {
      if (activeKey === '1') {
        if (selectedCollection) {
          // await datasetService.deleteDatasetCollection(selectedCollection._id);
          await datasetService.deleteDatasetFile({
            // fileIds: [item?.fileId],
            ids: [selectedCollection?.fileId],
          });

          setShowConfirmDelete(false);
          setSelectedCollection(null);
          message.success('删除成功');
          await fetchCollectionsAsync();
        }
      } else if (selectedAddFile && id) {
        console.log('selectedAddFile=============', selectedAddFile);

        if (isdeleArr && isArray(selectedAddFile)) {
          selectedAddFile.forEach((file) => {
            if (file?.type !== 'url' && (file.percent ?? 0) < 75) {
              const controller = uploadControllers.get(file.uid);
              if (controller) {
                controller.abort();
                setUploadControllers((prev) => {
                  const newMap = new Map(prev);
                  newMap.delete(file?.uid);
                  return newMap;
                });
              }
              removeAddedDatasetFile(id, file);
            }
          });
          const filesToDelete = selectedAddFile.filter(
            (file) => file?.type === 'url' || (file.percent ?? 0) >= 75,
          );
          const deletePromises = filesToDelete.map((file) => {
            const deleteService =
              file.type === 'url'
                ? datasetService.deleteUrlTaskDelete(file.fileId)
                : datasetService.deleteFcsTaskDelete(file.fileId);

            return deleteService.then((response) => {
              if (
                !response?.code ||
                response?.code === ResultEnum?.OK ||
                response?.code === ResultEnum?.SUCCESS
              ) {
                removeAddedDatasetFile(id, file); // 删除成功，移除文件
              } else {
                response?.message && debounceTipShow(response?.message);
              }
              return response;
            });
          });

          await Promise.all(deletePromises).then(() => {
            setShowConfirmDelete(false);
            setSelectedAddFile(null);
            // setIsdeleArr(false);
          });
        } else if (selectedAddFile.fileId) {
          if (selectedAddFile?.type == 'url') {
            await datasetService.deleteUrlTaskDelete(selectedAddFile.fileId);
          } else {
            await datasetService.deleteFcsTaskDelete(selectedAddFile.fileId);
          }
          removeAddedDatasetFile(id, selectedAddFile);
          setShowConfirmDelete(false);
          setSelectedAddFile(null);
          message.success('删除成功');
        }
      }
    } catch (error) {
      error?.message && debounceTipShow(error?.message);
    } finally {
      setIsDeleting(false);
    }
  };

  const debounceTipShow = debounce((msg: string) => {
    message.info(msg);
  }, 300);

  const onCollectionEdit = (collection: Collection) => {
    setSelectedCollection(collection);
    setRenameName(collection.name);
    setShowUpdateModal(true);
  };

  const onConfirmUpdate = async () => {
    if (!renameName) {
      message.warning('请输入文件名称');
    } else if (selectedCollection) {
      await datasetService.updateDatasetCollection({
        id: selectedCollection._id,
        name: renameName,
      });
      setShowUpdateModal(false);
      setSelectedCollection(null);
      message.success('修改成功');
      await fetchCollectionsAsync();
    }
  };

  const sidebarItems = [
    {
      key: '1',
      icon: 'file1',
      iconhover: 'hofile1',
      iconselect: 'sefile1',
      label: '本地文档',
      sub: '通过上传本地文档,读取文档内容作为数据源',
    },
    ...(initializeData?.preview_file_types?.includes('mp4')
      ? [
        {
          key: '5',
          icon: 'file1',
          iconhover: 'hofile1',
          iconselect: 'sefile1',
          label: '图片视频',
          sub: '通过上传图片视频，读取内容作为数据源',
        },
      ]
      : []),
    {
      key: '2',
      icon: 'file2',
      iconhover: 'hofile2',
      iconselect: 'sefile2',
      label: '网址链接',
      sub: '通过关联网址，读取静态网页内容作为数据源',
    },
    {
      key: '3',
      icon: 'file3',
      iconhover: 'hofile3',
      iconselect: 'sefile3',
      label: 'QA数据',
      sub: '通过上传本地CSV文档,读取文档内容作为数据源',
    },
    {
      key: '4',
      icon: 'file4',
      iconhover: 'hofile4',
      iconselect: 'sefile4',
      label: 'QA问答对',
      sub: '通过编辑QA问答对，导入生成数据源',
    },
  ];
  const [selectedKey, setSelectedKey] = useState('1');
  const [hoveredKey, setHoveredKey] = useState(null);

  const renderFileList = (files, type = 'url') => {
    return files.length === 0 ? (
      <EmptyPage description="" fontSize="400px" classname="mt-10" />
    ) : type == 'url' ? (
      <UrlFileListTable datas={files} onDelete={onUploadFileDelete} onUpdate={refrshTask} />
    ) : (
      <FileListTable datas={files} onDelete={onUploadFileDelete} onUpdate={fcsTaskRefresh} />
    );
  };

  // 添加qa到待入库列表中
  const onAddQA = (qa: QA) => {
    if (!qa.a) {
      message.warning('请输入答案');
      return;
    }
    if (!qa.q) {
      message.warning('请输入问题');
      return;
    }
    if (qa.id) {
      setQAs((prev) => [
        ...prev.map((item) => {
          if (item.id == qa.id) {
            return qa;
          }
          return item;
        }),
      ]);
    } else {
      const data = { ...qa, id: generateUUID() };
      setQAs((prev) => [data, ...prev]);
    }
    setQA({ id: '', q: '', a: '<p><br></p>' });
  };

  const onDeleteQA = (dqa: QA) => {
    if (dqa.id) {
      setQAs((prev) => [...prev.filter((item) => item.id != dqa.id)]);
    }

    if (dqa.id === qa.id) {
      setQA({ id: '', q: '', a: '<p><br></p>' });
    }
  };

  return (
    <div className="flex w-full flex-col p-4">
      <div className="flex pt-2">
        <Back
          title="导入数据"
          onBack={() => {
            onBack && onBack();
          }}
          confirmMessage={
            id &&
              getAddedDatasetFiles(id).filter(
                (item) =>
                  item.type !== 'url' && item.status == 'uploading' && (item?.percent || 0) < 75,
              ).length > 0
              ? '文件上传中，离开该页可能导致文件上传失败'
              : ''
          }
        />
        {/* <Back title={`资料·${datasetName ?? dataset?.name}`} /> */}
        {/* <Button loading={isUploading} type='primary' className='ml-auto mr-10' onClick={onConfirmUpload}>开始上传</Button> */}
        {/* {(selectedKey == '2' || selectedKey == '4') && (
          <Button
            loading={isUploading}
            disabled={selectedKey == '4' && qas.length === 0 ? true : false}
            className="ml-auto mr-10"
            style={{ backgroundColor: '#6640FF', color: '#fff' }}
            onClick={confirmImport}
          >
            {isUploading ? '正在导入...' : '确定导入'}
          </Button>
        )} */}
      </div>

      {/* 本地文档 */}
      {/* 网址链接 */}
      {/* 内部系统 */}
      <div className="mt-4 flex" style={{ background: 'transparent' }}>
        <div
          // className={`mt-3 ${!isPc && ' mr-5'
          //   } grid flex-col gap-3`}
          className="mb-3 gap-3"
          style={{
            height: `${initializeData?.preview_file_types?.includes('mp4') ? '448px' : '356px'}`,
            width: '362px',
            flexShrink: '0',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
          }}
        >
          {sidebarItems.map((item) => (
            <div
              key={item.key}
              className={`${isPc && ' mr-5'
                } w-full cursor-pointer rounded-xl border border-solid px-4 pb-[15px] pt-4 ${item.key === selectedKey ? 'dataset-item-selected' : 'dataset-item border-[#8DC4FF]'
                }`}
              onClick={() => {
                setSelectedKey(item.key);
              }}
              onMouseEnter={() => setHoveredKey(item.key)}
              onMouseLeave={() => setHoveredKey(null)}
              style={{ borderRadius: '6px' }}
            >
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: isPc ? undefined : 'center',
                }}
              >
                {isPc && (
                  <SvgIcon
                    icon={
                      item.key === selectedKey
                        ? item.iconselect
                        : item.key === hoveredKey
                          ? item.iconhover
                          : item.icon
                    }
                    size={50}
                    style={{ marginRight: '10px' }}
                  />
                )}
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <div
                    className={`label-style ${item.key === selectedKey ? '' : 'text-[#1D2129]'}`}
                  >
                    {item.label}
                  </div>
                  {isPc && (
                    <div
                      className={`sub-style ${item.key === selectedKey ? '' : 'text-[#86909C]'}`}
                    >
                      {item.sub}
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="ml-4  w-full rounded-md bg-[#F6F7FA]">
          {/* <div className="pt-2">
            <Title level={5} className="mt-4">
              知识库
            </Title>
            知识库的所有文件都在这里显示，整个知识库都可以链接到 校园百事通 引用或通过 Chat
            插件进行索引。
          </div> */}

          {(selectedKey == '1' || selectedKey == '3' || selectedKey == '5') && (
            <Upload
              title={
                selectedKey === '5'
                  ? '点击或拖动图片/视频到此处上传\n上传成功后AI会自动学习资料，并基于新内容回答'
                  : '点击或拖动文件到此处上传，上传成功后AI会自动学习资料，并基于新内容回答'
              }
              // 通过 style 设置换行样式（作用于 title 所在容器）
              accept={
                selectedKey == '3'
                  ? '.csv,.xlsx'
                  : selectedKey == '1'
                    ? '.txt,.docx,.doc,.csv,.xlsx,.pdf,.md,.html,.pptx,.ppt'
                    : '.png,.jpg,.jpeg,.mp4'
              }
              description={
                selectedKey == '3'
                  ? `支持csv，xlsx 类型文件，单个文件最大${file_size}MB${file_count > 0 ? `，单次上传最大文件数${file_count}个` : ''
                  }。`
                  : selectedKey == '1'
                    ? `支持txt，docx，doc，csv，xlsx，pdf，md，html，pptx，ppt类型文件，单个文件最大${file_size}MB${file_count > 0 ? `，单次上传最大文件数${file_count}个` : ''
                    }。`
                    : `图片支持：png、jpg、jpeg格式，视频支持：mp4格式，视频格式文件最大支持${file_size}MB ${file_count > 0 ? `，单次上传最大文件数${file_count}个` : ''
                    }。`
              }
              {...(file_count > 0 ? { maxCount: file_count } : {})}
              customRequest={customRequest}
              beforeUpload={beforeUpload}
              showUploadList={false}
              className="uploadheight"
              // icon={<SvgIcon icon='upload-icon'></SvgIcon>}
              style={{
                backgroundColor: '#F6F7FA',
                width: '100%',
                whiteSpace: 'pre-line',
              }}
            />
          )}

          {selectedKey == '2' && (
            // <Input
            //   placeholder="输入或粘贴网址，按键盘Enter键确定，多个网址可继续输入"
            //   value={inputValue}
            //   onChange={handleInputChange}
            //   onPressEnter={handleInputEnter}
            //   style={{ height: 200, borderRadius: 20, border: '1px solid #d9d9d9' }}
            // />

            <div className="flex h-full flex-col gap-3 rounded-md p-4">
              <Input.TextArea
                placeholder="输入网址，多个网址换行输入"
                value={inputValue}
                onChange={handleInputChange}
                style={{
                  height: 'calc(100% - 40px)',
                  // height: 220,
                  borderRadius: '6px',
                  border: '1px solid #d9d9d9',
                  resize: 'none',
                  padding: '12px',
                }}
              />

              <div className=" flex items-center justify-between">
                <div className="flex items-center">
                  <div
                    className="jsutify-center flex items-center"
                    style={{
                      padding: '10px',
                    }}
                  >
                    <div style={{ width: '80px', color: '#1D2129' }}>深度爬取</div>
                    <Switch
                      value={isDepthOpen}
                      onChange={(value) => {
                        setIsDepthOpen(value);
                      }}
                      checkedChildren="开启"
                      unCheckedChildren="关闭"
                      defaultChecked
                    />
                  </div>

                  <div
                    style={{
                      cursor: 'pointer',
                      color: '#86909C',
                      fontSize: '14px',
                      paddingLeft: '10px',
                    }}
                    onClick={() => setIsModalVisible(true)}
                  >
                    本功能仅提供技术支持，开发者不对使用者行为引发的后果负责。请合法、合规、谨慎使用！
                  </div>
                </div>

                <Button
                  loading={isUploading}
                  disabled={!!(selectedKey == '4' && qas.length === 0)}
                  // className="ml-auto mr-10"
                  style={{ border: '1px solid #1B6DFA' }}
                  type="text"
                  onClick={confirmImport}
                  icon={<SvgIcon icon="adddata" size={20} />}
                >
                  {/* <SvgIcon color="#BF63FF" icon="ri--layout-horizontal-fill" size={20} /> */}
                  {isUploading ? '正在导入...' : '确定导入'}
                </Button>
              </div>
            </div>
          )}

          {selectedKey == '4' && (
            <EditorPage
              editValue={qa}
              qas={qas}
              isUploading={isUploading}
              confirmImport={confirmImport}
              onAdded={onAddQA}
            />
          )}
        </div>
      </div>

      {/* {(selectedKey=='1'|| selectedKey=='3') &&  */}
      <Modal
        title="重要风险提示"
        visible={isModalVisible}
        onOk={() => setIsModalVisible(false)}
        onCancel={() => setIsModalVisible(false)}
        width={720}
        cancelButtonProps={{ style: { display: 'none' } }}
        bodyStyle={{
          maxHeight: '60vh',
          overflow: 'auto',
          whiteSpace: 'pre-wrap',
          lineHeight: 1.6,
        }}
      >
        {disclaimerContent}
      </Modal>

      <div
        className="ml-2 mr-2 mt-2 flex-1 rounded-lg pb-4"
      // style={{ backgroundColor: '#FBFCFF' }}
      >
        {selectedKey !== '4' && (
          // <Tabs
          //   size="small"
          //   indicator={{ size: (origin) => origin - 50, align: 'center' }}
          //   activeKey={activeKey}
          //   onChange={(key) => setActiveKey(key)}
          // >
          //   <TabPane
          //     key="2"
          //     // tab={<span className="ml-5">已添加({ getAddedDatasetFiles(id).length })</span>}
          //     tab={
          //       <span className="ml-5">
          //         已添加(
          //         {selectedKey == '2'
          //           ? getAddedDatasetFiles(id).filter((item) => item.type === 'url').length
          //           : getAddedDatasetFiles(id).filter((item) => item.type != 'url').length}
          //         )
          //       </span>
          //     }
          //   >
          <>
            <span className="mb-4 mt-4 flex gap-1 leading-[22px]">
              <span className="font-semibold text-[#1D2129]">已添加</span>
              <span className="text-[#86909C]">
                (
                {selectedKey == '2'
                  ? getAddedDatasetFiles(id).filter((item) => item.type === 'url').length
                  : getAddedDatasetFiles(id).filter((item) => item.type != 'url').length}
                )
              </span>
            </span>
            {/* {getAddedDatasetFiles(id).length > 0 && (
                  <FileListTable datas={getAddedDatasetFiles(id)} onDelete={onUploadFileDelete} />
                )} */}
            {getAddedDatasetFiles(id).length > 0 &&
              (selectedKey === '2'
                ? renderFileList(
                  getAddedDatasetFiles(id).filter((item) => item.type === 'url'),
                  'url',
                )
                : renderFileList(
                  getAddedDatasetFiles(id).filter((item) => item.type != 'url'),
                  'file',
                ))}
            {getAddedDatasetFiles(id).length == 0 && (
              <NotData iconSize={80} textClassName="text-sm" />
            )}
            {/* </TabPane>
            </Tabs> */}
          </>
        )}

        {/* {selectedKey == '4' && <QAList datas={qas} onEdit={setQA} onDelete={onDeleteQA} />} */}
        {selectedKey == '4' && (
          <>
            <span className="mb-4 mt-4 flex gap-1 leading-[22px]">
              <span className="font-semibold text-[#1D2129]">已添加</span>
              <span className="text-[#86909C]">({qas.length})</span>
            </span>
            <QAList datas={qas} onEdit={setQA} onDelete={onDeleteQA} />
          </>
        )}
      </div>

      {/* <DeleteModal
          onOk={onConfirmDelete}
          open={showConfirmDelete}
          onCancel={() => setShowConfirmDelete(false)}
        /> */}
      <DeleteConfirmModal
        loading={isDeleting}
        visible={showConfirmDelete}
        text="确定要删除吗？"
        onCancel={() => {
          setShowConfirmDelete(false), setIsDeleting(false);
        }}
        onConfirm={onConfirmDelete}
      />

      <CommonModal showCancelBtn={false} showOkBtn={false} open={showUpdateModal}>
        <div className="flex w-full flex-col items-center justify-center">
          <div className="mb-5 mt-5 text-lg">重命名000000</div>
          <Input
            type="text"
            className="text-center"
            value={renameName}
            onChange={(e) => {
              setRenameName(e.target.value);
            }}
            placeholder="请输入文件名称"
            style={{
              backgroundColor: '#F5F5F5',
              border: 'none',
              borderRadius: '50px',
              height: '45px',
              width: '90%',
            }}
          />
          <div className="justify-betwee mt-10 flex">
            <Button
              style={{ height: '40px', width: '100px', borderRadius: '10px' }}
              onClick={() => setShowUpdateModal(false)}
            >
              取消
            </Button>
            <Button
              className="ml-5"
              type="primary"
              style={{ height: '40px', width: '100px', borderRadius: '10px' }}
              onClick={onConfirmUpdate}
            >
              确定
            </Button>
          </div>
        </div>
      </CommonModal>
      {/* } */}

      {/* {selectedKey=='2' && <>
      <LinkTable></LinkTable>
      </>}  */}
      {selectedKey == '3' && <></>}
    </div>
  );
};

const RenderDatasets = ({ id: propId, name: propName, parentId: propParentId, onBack }: Props) => {
  return (
    <DatasetsContextProvider>
      <Datasets id={propId} name={propName} parentId={propParentId} onBack={onBack} />
    </DatasetsContextProvider>
  );
};

export default RenderDatasets;
